<template>
  <view class="su-grant-card">
    <view class="su-grant-card-body" @tap="cardClick">
      <view class="su-grant-card-img" v-if="data.image">
        <image lazy-load :src="data.image" mode="aspectFill"></image>
      </view>
      <view class="su-grant-card-main">
        <view class="su-grant-card-main__top">
          <view class="su-grant-card-row">
            <view class="su-grant-card-row__main">
              <text class="su-grant-card-name mr10">{{data.gcmc}}</text>
            </view>
            <view class="su-grant-card-row__asider">
              <u--text size="12" v-if="data.finishTime" text="在建" type="success" plain></u--text>
              <u--text size="12" v-else text="在建" type="warning" plain></u--text>
            </view>
          </view>
        </view>
        <view class="su-grant-card-rowprop__group mt5">
          <view class="su-grant-card-rowprop">
            <text class="su-label">填报时间：</text>
            <text class="su-value">{{data.tbsj || '--'}}</text>
          </view>
          <view class="su-grant-card-rowprop">
            <text class="su-label">形象进度：</text>
            <text class="su-value">{{data.xxjd || '--'}}</text>
          </view>
          <view class="su-grant-card-rowprop">
            <text class="su-label">本月完成产值：</text>
            <text class="su-value">{{data.byywccz || ''}}</text>
          </view>
          <view class="su-grant-card-rowprop">
            <text class="su-label">本月完成税收：</text>
            <text class="su-value">{{data.byysxss || ''}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="su-grant-card-footer large-btn">
      <u-button @click="cardClick">
        <text class="color-primary">详情</text>
      </u-button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "su-grant-card",
    props: {
      data: {
        type: Object,
        default () {
          return {}
        }
      },
    },
    computed: {
      rateVal() {
        const grade = +this.data.grade
        if (!grade) return 0
        return grade / 20
      }
    },
    data() {
      return {};
    },
    methods: {
      cardClick(){
        this.$u.route({
          url:'/pages/main/project/detail/detail',
          params:{
            id: this.data.uuid
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .su-grant-card {
    display: flex;
    margin-bottom: 20upx;
    background-color: #fff;
    flex-direction: column;
    border-radius: 16upx;
    box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.03);

    &-body {
      display: flex;
      padding: 24upx 24upx 6upx 24upx;
      transition: all 0.3s;

      &:active {
        opacity: 0.7;
      }
    }

    &-img {
      height: 200upx;
      background-color: #f7f7f7;
      border-radius: 6upx;
      width: 180upx;
      margin-right: 30upx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 10upx;
      }
    }

    &-main {
      display: flex;
      flex-direction: column;
      flex: 1;

      &__top {
        flex: 1;
      }
    }

    &-price {
      font-weight: bold;
      color: $u-error;
      font-size: 32upx;
    }

    &-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24upx;
      color: #aaa;

      &__main {
        flex: 1;
      }

      &__asider {
        margin-left: 10upx;
      }

      &__group {
        padding: 6upx 0;
      }
    }

    &-rowprop {
      display: flex;
      font-size: 24upx;
      color: #aaa;
      padding: 6upx 0;

      &::before {
        content: '';
        display: block;
        width: 10upx;
        height: 10upx;
        border-radius: 10upx;
        background-color: #ddd;
        margin-right: 10upx;
        margin-top: 12upx;
      }

      .su-label {
        color: #999;
      }

      .su-value {
        color: #555;
        flex: 1;
      }

      &__group {
        padding: 12upx 0;
      }
    }

    &-footer {
      height: 80upx;
      border-top: solid 1upx #f5f5f5;
      display: flex;
      align-items: center;
      font-size: 28upx;

      &.large-btn {
        /deep/.u-button {
          border: none;
          height: 100%;
          // border-right: solid 1upx #eee;
          border-radius: 0;

          &:last-child {
            border-right: none;
            border-radius: 0 0 16upx 0;
          }

          &:first-child {
            border-radius: 0 0 0 16upx;
          }
        }
      }
    }

    &-name {
      font-size: 32upx;
      color: #2A333B;
      font-weight: bold;
    }

    &-props {
      display: flex;
      margin-top: 12upx;
    }

    &-prop {
      background: #f8f8f8;
      border-radius: 4upx;
      font-size: 24upx;
      color: #666;
      line-height: 36upx;
      height: 40upx;
      display: flex;
      align-items: center;
      padding: 2upx 16upx;
      margin-right: 12upx;
      box-shadow: 0 0 1upx rgba(0, 0, 0, 0.05);
    }

    &-description {
      font-size: 22upx;
      color: #AAAAAA;
      margin-top: 12upx;
    }
  }
</style>
